<template>
	<view class="nick-name">
		<NavBar title="设置昵称"/>
		<view class="content">
			<view class="input">
				<input type="text" v-model="nickName" placeholder="请输入昵称" maxlength="100"/>
				<view class="clear">
					{{ nickName.length }}/100 
					<image src="/static/icon/mine/close.png" @tap="clear" class="c-img"/>
				</view>
			</view>
			<view class="tips" :class="isValidate?'err-tips':''"> 昵称限中文、英文及数字组合 </view>
			<view class="btn" @tap="save"> 保存 </view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { useUserStore } from '@/store/index.js'
	import { isValidName } from '@/utils/valdate.js'
	import { EditUserInfoApi } from '@/service/index.js'
	import NavBar from '@/components/NavBar.vue';
	const nickName = ref(''||useUserStore().userInfo.name)
	const isValidate = ref(false)  // 校验是否通过
	const clear = () => { nickName.value = '' }
	const save = () => {
		const { userInfo, GETUSERINFO } = useUserStore()
		if(!isValidName(nickName.value)) return isValidate.value = true
		isValidate.value = false
		let params = {
			name: nickName.value,
			avatar: userInfo.avatar
		}
		EditUserInfoApi(params).then(res => {
			GETUSERINFO()
			uni.navigateBack()
		})
	}
</script>

<style lang="scss" scoped>
	.nick-name {
		.content {
			padding: 10px 12px;
			box-sizing: border-box;
		}
		.input {
			width: 100%;
			height: 50px;
			background: #FFFFFF;
			border-radius: 10px;
			font-weight: 500;
			font-size: 17px;
			color: #333333;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 10px;
			box-sizing: border-box;
			input {
				flex: 1;
			}
			.clear {
				font-weight: 400;
				font-size: 12px;
				color: #CCCCCC;
				display: flex;
				align-items: center;
				margin-left: 10px;
				.c-img {
					width: 18px;
					height: 18px;
					margin-left: 10px;
				}
			}
		}
		.tips {
			color: #999999;
			font-size: 14px;
			margin-top: 10px;
			font-weight: 400;
			line-height: 18px;
			&.err-tips {
				color: #FF3B1E;
			}
		}
		.btn {
			margin-top: 20px;
			width: 100%;
			height: 50px;
			text-align: center;
			line-height: 50px;
			font-weight: 500;
			font-size: 17px;
			color: #FFFFFF;
			background: #FF3B1E;
			border-radius: 106px;
		}
	}
</style>
